<template>
  <div class="hottestTags p-3 mt-6 bg-slate-100">
    <div class="header flex justify-between items-center">
      <span>最热文章</span>
      <span class="more">更多</span>
    </div>
    <div class="line mt-2 mb-1"></div>
    <div class=""><TagsList :listData="tagsList" /></div>
  </div>
</template>
<script setup>
import TagsList from "../publicComponents/tagsList.vue";
import { ref } from "@vue/runtime-core";

const tagsList = ref(["vue", "react", "java", "css3", "组件化"]);
</script>
<style lang="scss" scoped>
.header {
  span {
    font-size: 16px;
    line-height: 16px;
  }
  .more {
    color: cadetblue;
    line-height: 12px;
    font-size: 12px;
  }
}
.line {
  height: 1px;
  background: darkgreen;
}
</style>
